import React, { Component } from 'react'
import { Upload, Button } from 'antd'
import axios from 'axios'
import './index.css'

const token = 'eyJhbGciOiJIUzUxMiJ9.eyJMT0dJTl9UWVBFIjoiUEMiLCJpZGVudGl0eU5hbWUiOiLogIHluIgiLCJ1c2VyX2lkIjoiODk3ZTBlZDE0MmY3NGY2MDk1YjkzMzRmYzBiMzU3NzkiLCJpZGVudGl0eUlkIjoiNzIiLCJvcmduaXphdGlvbnMiOiJjYjgyNzE0N2EyMmQ0YzYzOTE3MGY0YmI1NWI0ZDI1ZCIsIlVTRVJfTkFNRSI6IjE1ODQ0NDQ0MzQ5IiwibG9naW5fdXNlcl9rZXkiOiIzODRiMmZiNy1kM2QwLTRlNzEtYTc4OC1jZjQyN2RhMGVjZTUifQ.jwG3efiL49YwQRpUhfarb4wR4QRAwks1s4FNILQfUa2WIAMYHfBkfuVYzDgGi5IUlwJRh8FJhZEgadLvC3BDIQ'
const o = {
    "id": "",
    "fpName": "",
    "filePath": "",
    "fileName": "",
    "fileType": "",
    "fileSize": "",
    "coverFile": '',
    "duration": '',
    "url": ''
}

export default class Cupload extends Component {
    _customRequest = async ({ file }) => {
        const fromdata = new FormData()
        fromdata.append('file', file)
        fromdata.append('folder', 'oc')
        //附件上传的接口 (图片，视屏，音频，word,ppt,excel)
        const _up_res = await axios.post('/api/fujian/api/v1/fujian/uploadFile', fromdata, {
            headers: {
                token: token
            }
        });
        Object.keys(o).forEach(v => {
            o[v] = _up_res.data.result[v]
        })

    }
    render() {
        return (
            <div className="c_Upload_wrapper">
                <div style={{ display: 'flex', alignItems: 'center', padding: "10px" }}>
                    <Upload listType='picture' showUploadList={false} customRequest={this._customRequest}> <Button type='primary'>点击 上传</Button></Upload>
                </div>
            </div>
        )
    }
}
//简易文件预览的组件 
class Preview extends Cupload {
    state = {
        id: "",
        fpName: "",
        filePath: "",
        fileName: "",
        fileType: "",
        fileSize: "",
        coverFile: '',
        duration: '',
        url: '',
        //防止死循环的
        errorimg: false
    }
    componentDidMount() {
        let _this = this
        Object.keys(o).forEach(v => {
            Object.defineProperty(o, v, {
                set(val) {
                    _this.setState({
                        [v]: val
                    })
                }
            })
        })

    }
    render() {
        // 根据 fileType判断文件类型
        const { fileType } = this.state
        //图片类型
        if (fileType.indexOf("image") > -1) {
            return (<div style={{ padding: "10px" }}>
                <img
                    style={{ width: "400px", height: "300px" }}
                    src={"http://www.zjyd.test/public_resource/" + this.state.fpName}
                    alt=""
                    onError={(e) => {
                        this.setState({ errorimg: true })
                        e.target.src = 'http://www.zjyd.test/public_resource/zjyd-front-img/1.jpg'
                    }}
                />
            </div>)
            //视频类型
        } else if (fileType.indexOf("video") > -1) {
            return (<div>
                <video
                    controls
                    src={"http://www.zjyd.test/public_resource/" + this.state.fpName}
                >
                </video>
            </div>)
            //音频类型
        } else if (fileType.indexOf("audio") > -1) {
            return (<div>
                <audio
                    controls
                    src={"http://www.zjyd.test/public_resource/" + this.state.fpName}
                >

                </audio>
            </div>)
            // office类型
        } else if (fileType.indexOf("application") > -1||fileType.indexOf('text/plain')>-1) {
            return (<div style={{ width: "100%", height: '100%', overflowX: 'hidden' }}>
                <iframe
                    width="102%"
                    height='700px'
                    src={'http://office.zjyd.test:8088/?furl=http://www.zjyd.test/public_resource/' + this.state.fpName}
                    frameBorder="0">

                </iframe>
            </div>)
        } else {
            return <h1>上传的资源会在这里展示</h1>
        }
    }
}

export const UploadPreview = Preview
